<style lang="less">
.right-menu {
  background-color: #fff;
  background-color: #fff;
  box-sizing: border-box;
  border-radius: 4px;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
}
.gis-map-container {
  background: #fff;
  .left-tree {
    z-index: 888;
    background: #f0f3f5;
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
    width: 270px;
    height: 100%;
    display: inline-block;
    vertical-align: top;
    position: absolute;
    overflow: auto;
    .top-tree {
      background: #fff;
    }
  }

  .right-map {
    width: 100%;
    height: 100%;
    padding: 0;
    position: relative;
    padding-left: 270px;
    border-radius: 3px;
    margin: 0;
    .monitor-map-wrap {
      width: 100%;
      height: 850px;
      top: 0;
      z-index: 110;
      #monitor-map {
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>
<template>
  <div @click="hideRightMenu">
    <ul
      class="ivu-dropdown-menu right-menu"
      v-show="rightDeviceMenuShow"
      style="position:fixed;z-index:999"
      :style="{'top':rightDeviceMenuY+'px','left':rightDeviceMenuX+'px'}"
    >
      <li class="ivu-dropdown-item" @click="addEquipRoom" v-show="rightDeviceMenuType==1">添加机房</li>
      <li class="ivu-dropdown-item" @click="editEquipRoom" v-show="rightDeviceMenuType==2">修改机房</li>
      <li class="ivu-dropdown-item" @click="delEquipRoom" v-show="rightDeviceMenuType==2">删除机房</li>
      <li class="ivu-dropdown-item" @click="addFrame" v-show="rightDeviceMenuType==2">添加机架</li>
      <li class="ivu-dropdown-item" @click="editFrame" v-show="rightDeviceMenuType==3">修改机架</li>
      <li class="ivu-dropdown-item" @click="delFrame" v-show="rightDeviceMenuType==3">删除机架</li>
      <li class="ivu-dropdown-item" @click="addDevice" v-show="rightDeviceMenuType==3">添加设备</li>
      <li class="ivu-dropdown-item" @click="editDevice" v-show="rightDeviceMenuType==4">修改设备</li>
      <li class="ivu-dropdown-item" @click="delDevice" v-show="rightDeviceMenuType==4">删除设备</li>
    </ul>
    <div class="gis-map-container">
      <div class="left-tree">
        <div class="top-tree">
          <Tabs type="card">
            <TabPane label="设备">
              <deviceTree
                ref="devicetree"
                @treeClick="onDeviceTreeClick"
                @treeDbClick="onDeviceTreeDbClick"
                @treeRightClick="onDeviceTreeRightClick"
              />
            </TabPane>
            <TabPane label="光缆"></TabPane>
          </Tabs>
        </div>
      </div>
      <div class="right-map">
        <Row>
          <Tabs type="card" closable @on-tab-remove="handleTabRemove">
            <TabPane label="地图" name="tabMap" :closable="false">
              <div class="monitor-map-wrap">
                <l-map
                  :zoom="zoom"
                  :center="center"
                  :options="mapOptions"
                  style="height: 80%;"
                  @update:center="centerUpdate"
                  @update:zoom="zoomUpdate"
                >
                  <l-tile-layer :url="url" :attribution="attribution" />
                  <l-marker
                    v-for="(item,index) in equipmentRoomMarkerList"
                    :icon="equipRoomIcon"
                    :lat-lng="item.markerLatLng"
                    :key="index"
                  >
                    <l-popup>
                      <div>
                        <p>{{item.equipmentroomName}}</p>
                      </div>
                    </l-popup>
                  </l-marker>
                </l-map>
              </div>
            </TabPane>
            <TabPane label="机房" v-if="tabEquipRoom" name="tabEquipRoom">
              <div>
                <equipmentRoom ref="equipRoom" :equipmentRoomId="targetEquipmentRoomId" />
              </div>
            </TabPane>
            <TabPane label="设备" v-if="tabDevice" name="tabDevice">
              <div>
                <device ref="device" :deviceId="targetDeviceId"></device>
              </div>
            </TabPane>
          </Tabs>
        </Row>
      </div>
    </div>
    <!--机房-->
    <equipmentRoomForm
      :equipmentRoomModalVisible="equipmentRoomModalVisible"
      :modalType="equipmentRoomModalType"
      :deptId="deptId"
      :equipmentroomId="targetEquipmentRoomId"
      @updateDeviceTree="updateDeviceTree"
      @hideEquipRoomModal="hideEquipRoomModal"
    ></equipmentRoomForm>
    <!--机架-->
    <frameForm
      :frameModalVisible="frameModalVisible"
      :modalType="frameModalType"
      :equipmentroomId="targetEquipmentRoomId"
      :frameId="targetFrameId"
      @updateDeviceTree="updateDeviceTree"
      @hideFrameModal="hideFrameModal"
    ></frameForm>
    <!--设备-->
    <deviceForm
      :deviceModalVisible="deviceModalVisible"
      :modalType="deviceModalType"
      :frameId="targetFrameId"
      :deviceId="targetDeviceId"
      @updateDeviceTree="updateDeviceTree"
      @hideDeviceModal="hideDeviceModal"
    ></deviceForm>
  </div>
</template>

<script>
import config from "@/config";
const MAPURL = config.mapUrl;

import {
  getEquipmentRoomList,
  deleteEquipmentRoom,
  deleteFrame,
  deleteDevice
} from "@/api/device";
import deviceTree from "./../my-components/my-tree/deviceTree.vue";
import pipeTree from "./../my-components/my-tree/pipeTree.vue";
import equipmentRoomForm from "./equipmentRoomForm";
import frameForm from "./frameForm";
import deviceForm from "./deviceForm";
import equipmentRoom from "./equipmentRoom";
import device from "./device";
import { latLng } from "leaflet";
import {
  LMap,
  LTileLayer,
  LMarker,
  LPopup,
  LTooltip,
  LIcon
} from "vue2-leaflet";
import { icon } from "leaflet";
import EQUIPROOMICON from "./../../../static/equipRoomIcon.png";

export default {
  name: "gis-map",
  components: {
    deviceTree,
    pipeTree,
    LMap,
    LTileLayer,
    LMarker,
    LPopup,
    LTooltip,
    LIcon,
    equipmentRoomForm,
    frameForm,
    deviceForm,
    equipmentRoom,
    device
  },
  data() {
    return {
      tabEquipRoom: false,
      tabDevice: false,
      deviceClickFlag: null, //是否点击标识（定时器编号
      rightDeviceMenuShow: false,
      rightDeviceMenuX: 0,
      rightDeviceMenuY: 0,
      rightDeviceMenuType: 1, //1代表部门 2代表机房 3代表机架 4代表设备
      zoom: 13,
      center: latLng(30.52, 114.31),
      url: MAPURL,
      attribution: "北斗梦创",
      currentZoom: 8,
      currentCenter: latLng(30.52, 114.31),
      mapOptions: {
        zoomSnap: 0.5
      },
      showMap: true,
      equipmentRoomMarkerList: [], // 在地图上显示的机房
      equipRoomIcon: icon({
        iconUrl: EQUIPROOMICON,
        iconSize: [32, 37],
        iconAnchor: [16, 0]
      }),
      targetEquipmentRoomId: 0,
      targetEquipmentRoomName: "",
      deptId: 0, //所属部门
      equipmentRoomModalType: 0,
      equipmentRoomModalVisible: false,
      targetFrameId: 0, //修改删除机架用
      targetFrameName: "", //删除机架用
      frameModalType: 0,
      frameModalVisible: false,
      targetDeviceId: 0, //修改删除机架用
      targetDeviceName: "", //删除机架用
      deviceModalType: 0,
      deviceModalVisible: false
    };
  },
  methods: {
    init() {
      this.getMapOverlays();
    },
    handleTabRemove(name) {
      this[name] = false;
    },
    hideRightMenu() {
      this.rightDeviceMenuShow = false;
    },
    updateDeviceTree() {
      this.$refs.devicetree.getDeviceTree();
    },
    onDeviceTreeClick: function(treeNode) {
      if (this.deviceClickFlag) {
        //取消上次延时未执行的方法
        this.deviceClickFlag = clearTimeout(this.deviceClickFlag);
      }
      let _this = this;
      this.deviceClickFlag = setTimeout(function() {
        // click 事件的处理
        console.log("treeClick");
        console.log(treeNode);
        if (treeNode.nodeType == 2) {
          let id = parseFloat(treeNode.id.split("_")[1]);
          _this.center = _this.equipmentRoomMarkerList.find(
            v => v.equipmentroomId == id
          ).markerLatLng;
          _this.currentZoom = 10;
        }
        //在地图上显示位置
      }, 300); //延时300毫秒执行
    },
    onDeviceTreeDbClick(treeNode) {
      if (this.deviceClickFlag) {
        //取消上次延时未执行的方法
        this.deviceClickFlag = clearTimeout(this.deviceClickFlag);
      }
      //打开一个tab
      console.log("treeDbClick");
      console.log(treeNode);
      if (treeNode.nodeType == 1) {
        //表示右键部门
        this.deptId = parseFloat(treeNode.id);
      } else if (treeNode.nodeType == 2) {
        this.targetEquipmentRoomId = parseFloat(treeNode.id.split("_")[1]);
        //未打开机房tb
        if (!this.tabEquipRoom) {
          this.tabEquipRoom = true;
        } else {
          if (this.$refs.equipRoom) {
            this.$refs.equipRoom.getAllFrameInfo();
          }
        }

        // this.targetEquipmentRoomName = treeNode.name;
      } else if (treeNode.nodeType == 3) {
        this.targetFrameId = parseFloat(treeNode.id.split("_")[1]);
      } else if (treeNode.nodeType == 4) {
        this.deviceFrame = true;
        this.targetDeviceId = parseFloat(treeNode.id.split("_")[1]);
        //未打开机房tb
        if (!this.tabDevice) {
          this.tabDevice = true;
        } else {
          if (this.$refs.device) {
            // this.$refs.device.getAllFrameInfo();
          }
        }
      }
    },
    onDeviceTreeRightClick(evt, treeNode) {
      console.log("treeRightClick");
      console.log(evt);
      console.log(treeNode);
      treeNode.checked = true;
      this.rightDeviceMenuShow = true;
      this.rightDeviceMenuX = evt.clientX;
      this.rightDeviceMenuY = evt.clientY;
      if (treeNode.nodeType == 1) {
        //表示右键部门
        this.deptId = parseFloat(treeNode.id);
        this.rightDeviceMenuType = 1;
      } else if (treeNode.nodeType == 2) {
        this.targetEquipmentRoomId = parseFloat(treeNode.id.split("_")[1]);
        this.targetEquipmentRoomName = treeNode.name;
        this.rightDeviceMenuType = 2;
      } else if (treeNode.nodeType == 3) {
        this.targetFrameId = parseFloat(treeNode.id.split("_")[1]);
        this.targetFrameName = treeNode.name;
        this.rightDeviceMenuType = 3;
      } else if (treeNode.nodeType == 4) {
        this.targetDeviceId = parseFloat(treeNode.id.split("_")[1]);
        this.targetDeviceName = treeNode.name;
        this.rightDeviceMenuType = 4;
      }
    },

    getMapOverlays() {
      getEquipmentRoomList().then(
        res => {
          if (res.code == 0) {
            if (res.data.length > 0) {
              this.equipmentRoomMarkerList = res.data.map(v => {
                return {
                  equipmentroomId: v.equipmentroomId,
                  markerLatLng: latLng(parseFloat(v.lat), parseFloat(v.lng)),
                  equipmentroomName: v.equipmentroomName
                };
              });
            }
          }
        },
        error => {
          console.log("submit error", JSON.stringify(error));
        }
      );
    },
    addTab() {},
    hideEquipRoomModal() {
      this.equipmentRoomModalVisible = false;
    },
    addEquipRoom() {
      this.equipmentRoomModalVisible = true;
      this.equipmentRoomModalType = 0;
    },
    editEquipRoom() {
      this.equipmentRoomModalVisible = true;
      this.equipmentRoomModalType = 1;
    },
    delEquipRoom() {
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除机房 " + this.targetEquipmentRoomName + " ?",
        loading: true,
        onOk: () => {
          deleteEquipmentRoom(this.targetEquipmentRoomId).then(res => {
            this.$Modal.remove();
            if (res.code == 0) {
              this.$Message.success("删除成功");
              this.updateDeviceTree();
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    hideFrameModal() {
      this.frameModalVisible = false;
    },
    addFrame() {
      this.frameModalVisible = true;
      this.frameModalType = 0;
    },
    editFrame() {
      this.frameModalVisible = true;
      this.frameModalType = 1;
    },
    delFrame() {
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除机架 " + this.targetFrameName + " ?",
        loading: true,
        onOk: () => {
          deleteFrame(this.targetFrameId).then(res => {
            this.$Modal.remove();
            if (res.code == 0) {
              this.$Message.success("删除成功");
              this.updateDeviceTree();
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    hideDeviceModal() {
      this.deviceModalVisible = false;
    },
    addDevice() {
      this.deviceModalVisible = true;
      this.deviceModalType = 0;
    },
    editDevice() {
      debugger;
      this.deviceModalVisible = true;
      this.deviceModalType = 1;
    },
    delDevice() {
      this.$Modal.confirm({
        title: "确认删除",
        content: "您确认要删除设备 " + this.targetDeviceName + " ?",
        loading: true,
        onOk: () => {
          deleteDevice(this.targetDeviceId).then(res => {
            this.$Modal.remove();
            if (res.code == 0) {
              this.$Message.success("删除成功");
              this.updateDeviceTree();
            } else {
              this.$Message.error(res.msg);
            }
          });
        }
      });
    },
    zoomUpdate(zoom) {
      this.currentZoom = zoom;
    },
    centerUpdate(center) {
      this.currentCenter = center;
    }
  },
  mounted() {
    this.init();
  }
};
</script>
